// ------------------------ 实现基本的剪裁效果 ----------------------
// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')

// 1.2 配置选项
const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options);

// ---------------------- 当点击上传的时候  传图片-----------------
$('.btn-img').on('click', function() {
    $('#file').click();
});
// ---------------------- 更换裁剪区的图片 -----------------
$('#file').on('change', function() {
    // 找到文件对象
    // console.dir(this);
    let fileObj = this.files[0];
    // 为文件对象正常一个临时的url
    let url = URL.createObjectURL(fileObj);
    // 更换图片 --销毁裁剪区 - 更换图片 -- 重建裁剪区 ---
    $image.cropper('destroy').attr('src', url).cropper(options);
})

// ---------------------- 点击 确定 完成图片的更改 -----------------
$('.layui-btn-danger').on('click', function() {
    // 调用插件的方法,得到裁剪图片
    let canvas = $image.cropper('getCroppedCanvas', {
        width: 100,
        height: 100
    });
    // 2. 把图片转成字符串形式
    let str = canvas.toDataURL('image/png');
    // console.log(str);
    // ajax提交数据 完成图片的更新
    $.ajax({
        type: 'POST',
        url: 'http://ajax.frontend.itheima.net/my/update/avatar',
        headers: {
            Authorization: localStorage.getItem('token')
        },
        data: {
            avater: str
        },
        success: function(res) {
            layer.msg(res.message);
            // 调用父页面的额函数,重新渲染页面
            window.parent.randerUser();
        }
    })
})